<template>
  <div class="app-container home">
    <div class="header">
      <span>周期：</span>
      <el-date-picker
        v-model="dateRange"
        style="width: 350px"
        value-format="yyyy-MM-dd"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="onChange"
      ></el-date-picker>
    </div>
    <div class="tip">
      <span>总用户数：</span>
      <span class="value">{{ totalSumData.user }}</span>
      <span>总会话数：</span>
      <span class="value">{{ totalSumData.chat }}</span>
      <span>总合同审查数：</span>
      <span class="value">{{ totalSumData.contract }}</span>
      <span>总文书撰写数：</span>
      <span class="value">{{ totalSumData.doc }}</span>
    </div>
    <el-row :gutter="20" style="height: calc(100vh - 222px)">
      <el-col :span="12" style="height: 100%">
        <div class="title">每日用户注册数量，登录数量，活跃数量</div>
        <div id="mainA" class="charts"></div>
      </el-col>
      <el-col :span="12" style="height: 100%">
        <div class="title">每日会话新建数量，合同审查数量，文书撰写数量</div>
        <div id="mainB" class="charts"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { sumData, userSumData, chatSumData } from "@/api/fzz";
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.6",
      dateRange: [new Date(), new Date()],
      totalSumData: {},
    };
  },
  mounted() {
    this.getSumData();
    this.initChartsA();
    this.initChartsB();
  },
  methods: {
    onChange() {
      this.getSumData();
      this.initChartsA();
      this.initChartsB();
    },
    getSumData() {
      sumData({
        startTime: new Date(this.dateRange[0]).getTime(),
        endTime: new Date(this.dateRange[1]).getTime(),
      }).then((res) => {
        console.log(res);
        this.totalSumData = res.data;
      });
    },
    async initChartsA() {
      var myChart = echarts.init(document.getElementById("mainA"));
      var option;
      const result = await userSumData({
        startTime: new Date(this.dateRange[0]).getTime(),
        endTime: new Date(this.dateRange[1]).getTime(),
      });
      console.log(result);
      option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          bottom: "0",
          data: ["注册数量", "登录数量", "活跃数量"],
        },
        grid: {
          left: "3%",
          right: "4%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: result.data.map((item) => item.time),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "注册数量",
            type: "line",
            stack: "Total",
            data: result.data.map((item) => item.reg),
          },
          {
            name: "登录数量",
            type: "line",
            stack: "Total",
            data: result.data.map((item) => item.login),
          },
          {
            name: "活跃数量",
            type: "line",
            stack: "Total",
            data: result.data.map((item) => item.active),
          },
        ],
      };

      option && myChart.setOption(option);
    },
   async initChartsB() {
      var myChart = echarts.init(document.getElementById("mainB"));
      var option;
      const result = await chatSumData({
        startTime: new Date(this.dateRange[0]).getTime(),
        endTime: new Date(this.dateRange[1]).getTime(),
      });
      option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          bottom: "0",
          data: ["新建数量", "合同审查数量", "文书撰写数量"],
        },
        grid: {
          left: "3%",
          right: "4%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: result.data.map((item) => item.time),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "新建数量",
            type: "line",
            stack: "Total",
            data: result.data.map((item) => item.chat),
          },
          {
            name: "合同审查数量",
            type: "line",
            stack: "Total",
            data: result.data.map((item) => item.contract),
          },
          {
            name: "文书撰写数量",
            type: "line",
            stack: "Total",
            data: result.data.map((item) => item.doc),
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  .header {
    display: flex;
    align-items: center;
    span {
      margin-right: 6px;
    }
  }
  .tip {
    margin: 20px 0;
    .value {
      font-weight: 700;
      margin-right: 10px;
      color: rgb(64, 158, 255);
    }
  }
  .title {
    font-weight: 700;
    margin-bottom: 20px;
    text-align: left;
  }
  .charts {
    height: calc(100% - 22px);
  }
}
</style>

